// 热门商品js效果
// 先渲染页面

xrLager(data.beautyData.mianpic);
xrSmall(data.beautyData.mianpic);
xrHot(data.beautyData.mianpic);
xrlittleImg()
xrBrand(data.beautyData.pinpai)
duibi();
duibi1();

// // 渲染大图列表内的小图标
function xrlittleImg() {

    // 获取当前Id
    for (i = 0; i < $('.gl_large .gl_item').length; i++) {
        var zsList = "";
        var dqId = $('.gl_large .gl_item .p_operate input').eq(i).attr('id');
        data.beautyData.mianpic.forEach(function (value, index, array) {
            if (data.beautyData.mianpic[index].goodid == dqId) {
                data.beautyData.mianpic[index].goodurls.picsurl.forEach(function (val, ind, ar) {
                    zsList += `<li class="curr">
                        <img src="${data.beautyData.mianpic[index].goodurls.picsurl[ind]}" alt="">
                    </li>`;
                })
            }

        })
        $('.gl_large .gl_item .sider ul').eq(i).append(zsList);
    }
}
// 鼠标移入小图大图跟着改变
function dxb() {
    $('.gl_large .gl_item .sider li').mouseover(function () {
        console.log($(this));
        var aa = $(this).find('img').attr('src')
        $(this).parents('.sider').prev().find('img').attr('src', aa)
        console.log($(this).parents('.sider'));
    })
}

// xrlittleImg();
// 封装渲染函数
// 大图函数
function xrLager(arr) {
    var largeList = "";
    // ./details.html?${arr[i].goodid}
    for (i = 0; i < arr.length; i++) {
        largeList += `<li class="gl_item">
        <div class="gl_item_wrap">
   
            <div class="p_img" data-gid="${data.beautyData.mianpic[i].goodid}">
                <a href="javascript:;">
                    <img src="${arr[i].goodurls.showurl}" alt="">
                </a>
            </div>
   
            <div class="sider">
                <ul>
                    <li class="curr">
                        <img src="${arr[i].goodurls.showurl}" alt="">
                    </li>
                </ul>
            </div>
   
            <div class="p_lie">
                <!-- 价格 -->
                <div class="p_price">
                 ￥<em>${arr[i].goodprice}</em>
                </div>
   
                <div class="p_num f12">
                    已售<em>${arr[i].sales}</em>件
                </div>
            </div>
   
            <div class="p_name f12">
                <a href="#">
                ${arr[i].goodtitle}
                </a>
            </div>
   
            <div class="p_store f12">
                <a href="merchants_store.php?merchant_id=9" title="美宝莲" class="store" target="_blank">
                ${arr[i].shopname}
                </a>
                <a id="IM" onclick="openWin(this)" href="javascript:void(0);" ru_id="9" goods_id="893" class="p_kefu">
                    <span class="iconfont icon-kefu"></span>
                </a>
            </div>
   
            <div class="p_operate f12">
                <a href="javascript:;" id="compareLink_on">
                    <input type="checkbox"  name="" id="${arr[i].goodid}" name="duibi">
                    <label for="${arr[i].goodid}" class="db">对比</label>
                </a>
                <a href="javascript:;" class="choose_coll">
                    <span class="iconfont icon-jushoucang"></span>
                    收藏
                </a>
                <a href="javascript:;" class="addcart">
                    <span class="iconfont icon-gouwuchekong"></span>
                    加入购物车
                </a>
            </div>
        </div>
         </li>`
    }
    $('.gl_large ul').html(largeList);
    $('.p_operate').click(function (e) {
        e.stopPropagation();
    })
}

// 品牌渲染
function xrBrand(arr) {
    var brandList = "";
    for (var i = 0; i < arr.length; i++) {
        brandList += `<div class="brand_cont_b brand_cont_b1">
        <div>
            <a href="javascript:;" class="brand_img ">
                <img src="${arr[i].goodurls}" alt="">
            </a>
        </div>
        <div>
            <a href="javascript:;" class="brand_titles none">
                ${arr[i].title}
            </a>
        </div>
    </div>
    `
    }
    $('.brand_cont').html(brandList);
}
// 热门商品函数
function xrHot(arr) {
    var hotList = "";
    for (i = 0; i < arr.length; i++) {
        hotList += `<li>
        <div class="item">
            
            <div class="p_img"  data-gid="${data.beautyData.mianpic[i].goodid}">
                <a href="#">
                    <img src="${arr[i].goodurls.showurl}" alt="" class="w">
                </a>
            </div>
           
            <div class="p_name f12">
                    <a href="https://x.dscmall.cn/goods-890.html" title="宝姿美宝莲 顺滑恒久眉笔流畅线条 利落型眉 可长久持妆 新品上市 流畅线条 利落型眉 长效持妆" target="_blank">
                        ${arr[i].goodtitle}
                    </a>
            </div>
           
            <div class="p_price">
            ${arr[i].goodprice}
            </div>
            
            <div class="p_btn">
                <a class="btn sc-redBg-btn" href="https://x.dscmall.cn/goods-890.html">
                    立即购买
                </a>
            </div>

        </div>
    </li>`;
    }
    $('.hotsale_bd ul').html(hotList);
}
// 小图函数封装
function xrSmall(arr) {
    var smallList = "";
    for (i = 0; i < arr.length; i++) {
        // ./details.html?${arr[i].goodid}
        smallList += `<li class="gl_small_item">
            <div class="glSmall_left f12">
                <!-- 图片 -->
                <div class="p_img" data-gid="${data.beautyData.mianpic[i].goodid}">
                    <a href="javascript:;">
                        <img src="${arr[i].goodurls.nowurl}" alt="">
                    </a>
                </div>

                <!-- 介绍 -->
                <div class="p_introduce">
                    <div class="p_name ">
                        <a href="#" title="Maybelline/美宝莲好气色水润唇部套装 滋润保湿持久显色唇露唇膏" target="_blank">
                        ${arr[i].goodtitle}
                    </a>
                    </div>
                    <div class="p_lie">
                        <div class="p_num">
                            销量: <em>${arr[i].sales}</em>
                        </div>
                        <div class="p_comm">
                            评价: <em>${arr[i].goodcount}</em>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 产品店铺和客服 -->
            <div class="glSmall_kefu">
                <div class="p_store">
                    <a href="#" title="商创自营" class="store f14">
                    ${arr[i].shopname}
                    </a>
                    <a id="IM" onclick="openWin(this)" href="javascript:void(0);" ru_id="9" goods_id="893" class="p_kefu">
                        <span class="iconfont icon-kefu"></span>
                    </a>
                </div>
            </div>

            <!-- 产品价格 -->
            <div class="glSmall_price f14">
                <div class="shop_price">
                    ￥<em>${arr[i].goodprice}</em>
                </div>
                <div class="original_price">
                    ￥<em>${arr[i].goodzprice}</em>
                </div>
            </div>

            <!--最右侧 产品收藏对比和购物车 -->
            <div class="glSmall_right ">
                <!-- 对比收藏购物车 -->
                <div class="p_operate f12">
                    <a href="#" id="compareLink_on">
                        <input type="checkbox" name="" id="${arr[i].goodid}" name="duibi">
                        <label for="${arr[i].goodid}" class="db">对比</label>
                    </a>
                    <a href="javascript:;" class="choose_coll">
                        <span class="iconfont icon-jushoucang"></span> 收藏
                    </a>
                    <a href="javascript:;" class="addcart">
                        <span class="iconfont icon-gouwuchekong"></span> 加入购物车
                    </a>
                </div>
            </div>
            </li>`
    }
    $('.gl_small ul').html(smallList);
    $('.p_operate').click(function (e) {
        e.stopPropagation();
    });
    $('.addcart').off().click(function () {
        var flag = confirm('确定要添加到购物车吗');
        var gid = $(this).parents('.gl_item_wrap').find('.p_img').data('gid');
        if (!gid) {
            gid = $(this).parents('.gl_small_item').find('.p_img').data('gid');
        }
        var gooddata;
        // 获取此商品的详情数据
        $.each(data.beautyData.mianpic, function (index, value) {
            if (value.goodid == gid) {
                gooddata = value;
            }
        })
        console.log(gooddata);

        // 如果点击确定
        if (flag) {
            $('.panel_content').css('display', 'none');
            // 判断当前本地存储中是否有购物车数据
            if (localStorage.getItem('cart')) {
                var cart = JSON.parse(localStorage.getItem('cart'));
                var test = true;
                // 遍历当前购物车
                $.each(cart, function (index, value) {
                    // 如果存在当前商品
                    if (value.goodid == gooddata.goodid) {
                        // 数量加1
                        value.num++
                        test = false;
                    }
                })
                // 如果已存在的购物车中没有这个商品
                if (test) {
                    gooddata.num = 1;
                    cart.push(gooddata);
                }
                // 将最新的cart数据添加到本地存储
                localStorage.setItem('cart', JSON.stringify(cart));
            } else {
                gooddata.num = 1;
                localStorage.setItem('cart', JSON.stringify([gooddata]))
            }

            update();
            upCartgoods();
            upPrice();
            $('.jia').off().click(function () {
                var num = Number($(this).siblings('span').text()) + 1;
                var id = $(this).data('gid');
                $(this).siblings('span').text(num);
                upCart(id, num);
                var price = $(this).parent().next().data('price');
                $(this).parent().next().text('￥' + price * num);
                upPrice();
                console.log($('.cart_item').eq($(this).parents('.buy_list')));
                $('.cart_item').eq($(this).parents('.buy_list').index()).find('.cart_bailan').text(num);
            });
            $('.jian').off().click(function () {
                var num = Number($(this).siblings('span').text()) - 1;
                console.log(num);
                
                var id = $(this).data('gid');
                if (num > 0) {
                    $(this).siblings('span').text(num);
                    upCart(id, num)
                    var price = $(this).parent().next().data('price');
                    $(this).parent().next().text('￥' + price * num);
                    upPrice();
                    
                    
                    $('.cart_item').eq($(this).parents('.buy_list').index()).find('.cart_bailan').text(num);
                }
            })
        }
    })
}
// 封装获取匹配对象的函数
function hqData(aaa) {
    var arr = [];
    data.beautyData.mianpic.forEach(function (value, index, array) {
        if (data.beautyData.mianpic[index].goodstype == aaa) {
            arr.push(data.beautyData.mianpic[index])
        }
    })
    return arr;
}

function hqData1(aaa) {
    var arr = [];
    data.beautyData.mianpic.forEach(function (value, index, array) {
        if (data.beautyData.mianpic[index].goodsfile == aaa) {
            arr.push(data.beautyData.mianpic[index])
        }
    })
    return arr;
}


// 热门推荐数据渲染
function hotSaleXr() {
    var hotgoods = "";
    data.beautyData.mianpic.forEach(function (value, index, arr) {
        hotgoods += ` 
        <li>
            <div class="item">
                
                <div class="p_img">
                    <a href="javascript:;">
                        <img src="${data.beautyData.mianpic[index].goodurls.showurl}" alt="" class="w">
                    </a>
                </div>
               
                <div class="p_name f12">
                        <a href="https://x.dscmall.cn/goods-890.html" title="宝姿美宝莲 顺滑恒久眉笔流畅线条 利落型眉 可长久持妆 新品上市 流畅线条 利落型眉 长效持妆" >
                            ${data.beautyData.mianpic[index].goodtitle}
                        </a>
                </div>
               
                <div class="p_price">
                ${data.beautyData.mianpic[index].goodprice}
                </div>
                
                <div class="p_btn">
                    <a class="btn sc-redBg-btn" href="https://x.dscmall.cn/goods-890.html">
                        立即购买
                    </a>
                </div>

            </div>
        </li>`
        // }
    })
    $('.hotsale_bd ul').html(hotgoods);
}
// 封装排序选中后，切换页面时的排序
function qhSort() {
    if ($('.filter a').eq(1).hasClass('cur_red')) {
        numSort();
        numSort1();
    }
    if ($('.filter a').eq(4).hasClass('cur_red')) {
        console.log('11');
        priceSort();
        priceSort1();
    }
    if ($('.filter a').eq(0).hasClass('cur_red')) {
        // console.log('11');
    }
}




// 个人化妆清洁用品js效果
$('.crumbs_nav').hover(
    function () {
        $('.trigger').addClass('on')
        $('.crumbs_main').css('display', 'block')
    },
    function () {
        $('.trigger').removeClass('on')
        $('.crumbs_main').css('display', 'none')
    }
)
$('.crumbs_nav li').hover(
    function () {
        $(this).find('a').css('color', 'red');
    },
    function () {
        $(this).find('a').css('color', 'black');
    }
)

// 个人化妆清洁移入移出
$('.crumbs_nav_item').hover(
    function () {
        $(this).addClass('on');
        $('.crumbs_item_main').css('display', 'block');
    },
    function () {
        $(this).removeClass('on');
        $('.crumbs_item_main').css('display', 'none');
    }
)
$('.crumbs_item_main li').hover(
    function () {
        $(this).find('a').css('color', 'red');
    },
    function () {
        $(this).find('a').css('color', 'black');
    }
)


// 点击个人化妆清洁,后面二级来联动消失重新渲染页面
$('.crumbs_nav .trigger').click(function () {
    $('.crumbs_nav_item').hide();
    $('.crumbs_nav_cont').hide();
    $('.shuttle').hide();
    $('.shuttle1').hide();
    // 重新渲染页面
    xrLager(data.beautyData.mianpic);
    xrSmall(data.beautyData.mianpic);
    xrHot(data.beautyData.mianpic);
    xrlittleImg()
    duibi();
    duibi1();
    qhSort();
    dxb()
})

// 个人化妆清洁二级导航内点击事件    二级联动
$('.crumbs_main li').click(function () {
    // 三级来联动消失
    $('.shuttle1').hide();
    $('.crumbs_nav_cont').hide();
    // 点击后出现后面二级样式
    $('.shuttle').show();
    $('.crumbs_nav_item').show();

    // 将点击内容加入到二级内容区域
    var crumbsIndex = $(this).index();
    $('.crumbs_nav_item a span').text(data.nameDate.cosmetic[crumbsIndex].name);
    var crumbsList = "";
    data.nameDate.cosmetic[crumbsIndex].use.forEach(function (value, index, arr) {
        crumbsList += `<li>
        <a href="javascript:;">${data.nameDate.cosmetic[crumbsIndex].use[index].name}</a>
        </li>`
    })
    $('.crumbs_item_main ul').html(crumbsList)

    // 获取点击的文字内容，并将相匹配的结果动态渲染到页面指定区域
    // 1：先获取点击内容
    var firstCont = String($(this).text()).trim();
    xrLager(hqData(firstCont));
    xrSmall(hqData(firstCont));
    xrHot(hqData(firstCont));
    xrlittleImg();
    //2: 点击后渲染对应内容
    // hotContent1(firstCont);
    duibi();
    duibi1();
    qhSort();
    dxb()

    // 鼠标移入二级内字体变红
    $('.crumbs_item_main li').hover(
        function () {
            $(this).find('a').css('color', 'red');
        },
        function () {
            $(this).find('a').css('color', 'black');
        }
    )

    // 点击第二级出现第三级
    $('.crumbs_item_main li').click(function () {
        // 保存点击按钮的索引
        var mainIndex = $(this).index();
        // 根据索引将点击内容添加至三级框内
        $('.crumbs_nav_cont a span').text(data.nameDate.cosmetic[crumbsIndex].use[mainIndex].name)
        $('.crumbs_nav_cont').show();
        $('.shuttle1').show();

        // 选中的内容
        var cc = $('.crumbs_nav_cont a span').text();
        console.log(cc);
        console.log(hqData1(cc));

        // 渲染对应的内容
        xrLager(hqData1(cc));
        xrSmall(hqData1(cc));
        xrHot(hqData1(cc));
        xrlittleImg();
        duibi();
        duibi1();
        qhSort();
        dxb()
    })

})





// 品牌广告js
$('.brand_cont_b').hover(

    function () {
        var index = $(this).index();
        $(this).addClass('on');
        $('.brand_img').eq(index).addClass('none')
        $('.brand_titles').eq(index).removeClass('none')
    },
    function () {
        var index = $(this).index();
        $(this).removeClass('on')
        $('.brand_img').eq(index).removeClass('none')
        $('.brand_titles').eq(index).addClass('none')
    }
)
// 点击全部撤销选择框消失
$('.selector .brand_mulpitle_checked .all_revoke').click(function () {
    $('.brand_mulpitle_checked').css('display', 'none');
    $('.yes_no_box .yes_bt').addClass('none');
    $('.zimu_list .choose_ico').removeClass('choose_ico_checked')

})

// 更多内容和多选按钮
$('.brand_o1').hover(
    function () {
        $(this).addClass('on');
    },
    function () {
        $(this).removeClass('on');
    }
)
// 点击更多内容按钮
$('.brand_more').click(function () {

    if ($('.brand_multiple_cont').hasClass('none') != true) {
        alert('请收起全部单选');
        $('.brand_packet').removeClass('brand_packet_change')
    } else {
        $('.brand_packet').toggleClass('brand_packet_change')
    }
})
// 点击多选按钮
$('.brand_multiple').click(function () {

    // 若页面处于更多内容页面则不会打开多选页面
    if ($('.brand_packet').hasClass('brand_packet_change')) {
        alert('请收起全部单选');
        $('.brand_multiple_cont').addClass('none');
    } else {
        $('.brand_cont').toggleClass('none')
        $('.brand_multiple_cont').toggleClass('none');
        // 切换多选中的文字内容
        if ($('.brand_multiple_cont').hasClass('none') != true) {
            $('.brand_multiple').find('span').remove();
            var spans1 = `<span class="multiple">一收起</span>`
            $('.brand_multiple').append(spans1)
        } else {
            $('.brand_multiple').find('span').remove();
            var spans = `<span class="iconfont icon-jiahao_o">
                        </span><span class="multiple">多选</span>`
            $('.brand_multiple').append(spans)
            $('.brand_mulpitle_checked').css('display', 'none');
        }
        // var multiple = $('.brand_multiple')[0];
        // multiple.innerHTML ='一起收';
    }
});

// 更多内容内a-z的js效果
$('.brand_az li').mouseover(function () {
    $('.brand_az li').removeClass('curr');
    $(this).addClass('curr');
    $('.zimu_list').removeClass('none')
})
$('.zimu_list').find('.choose_ico').click(function () {
    $('.yes_no_box .yes_bt').toggleClass('none');
    $('.zimu_list .choose_ico').toggleClass('choose_ico_checked')
})
$('.yes_no_box .yes_bt').click(
    function () {
        $('.brand_mulpitle_checked').css('display', 'block')
    }
)
// 点击关闭关闭多选页
$('.brand_yes_no .no_bt').click(
    function () {
        $('.brand_mulpitle_checked').css('display', 'none');
        $('.brand_multiple_cont').addClass('none');
        $('.brand_cont').removeClass('none')
    }
)




// 筛选模块

// 排序方法的js效果
$('.filter_sort a').click(function () {
    // 选中后排他当前排序名变红，箭头向下，其他箭头向下
    $('.filter_sort a').removeClass('cur_red')
    $(this).addClass('cur_red');
})



// 排序

// 默认排序
$('.filter_sort .mr_sort').click(function () {
    // data.beautyData.mianpic
    // xrLager() 
    // xrLager(data.beautyData.mianpic);
    // xrSmall(data.beautyData.mianpic)
})
// 按照价格排序
$('.filter_sort .price_sort').click(function () {
    priceSort();
    priceSort1()
})
// 按销量排序
$('.filter_sort .num_sort').click(function () {
    numSort();
    numSort1()
})

// 价格筛选的js效果
$('.fprice input').focus(function () {
    $('.fprice_expand').show();
})
$('.fprice input').blur(function () {
    $('.fprice_expand').hide();
})
// 点击清空
$('.fprice_input_clear').mousedown(
    function () {
        $('.fprice input').val("");
    }
)
// 点击提交
$('.fprice_input_submit').mousedown(
    // 价格筛选
    function () {
        priceInquire();
        priceInquire1();
        $('.fprice .text_min').val("")
        $('.fprice .text_max').val("")
    }
)






// 大图下图点击切换
$('.large').click(function () {
    $('.gl_large').removeClass('gl_none');
    $('.gl_small').addClass('gl_none');
    $(this).addClass('current');
    $('.small').removeClass('current')
})
$('.small').click(function () {
    $('.gl_small').removeClass('gl_none');
    $('.gl_large').addClass('gl_none');
    $(this).addClass('current');
    $('.large').removeClass('current');
})





// 动态渲染猜你喜欢
function guessList() {
    // 数据
    var guessData = data.beautyData.guesspic;
    var guesscont = "";
    guessData.forEach(function (value, index, arr) {
        guesscont += `<li class="opacity_img">
        <!-- 图片 -->
        <div class="p_img">
            <a href="javascript:;">
                <img src="${guessData[index].goodurls.showurl}" alt="">
            </a>
        </div>

        <!-- 价格 -->
        <div class="p_price">
        ${guessData[index].goodprice}
        </div>

        <!-- 简介 -->
        <div class="p_name f12">
            <a href="javascript:;">
            ${guessData[index].goodtitle}
            </a>
        </div>

        <!-- 销售量 -->
        <div class="p_num f12">
            出售 <em>${guessData[index].sales}</em>件
        </div>
    </li>`
    })
    $('.get_guess .guess_list ul').html(guesscont);
    $($('.get_guess .guess_list ul li'))[6].style.marginRight = '0px'
}
guessList();




// 封装筛选和排序对比函数
/* 排序按价格排序 */

// 大图排序
function priceSort() {
    var viewCont = $('.gl_large .gl_item');

    var minPrice;
    var blprice;
    var viewPrice;
    for (i = 0; i < viewCont.length - 1; i++) {
        // 保存当前必须遍历的元素的价格
        minPrice = i;
        viewPrice = Number($('.gl_large .gl_item .p_price em').eq(i).text());
        // console.log(viewPrice);
        for (j = i + 1; j <= viewCont.length; j++) {
            blprice = Number($('.gl_large .gl_item .p_price em').eq(j).text());
            if (viewPrice >= blprice && j < viewCont.length) {
                minPrice = j
                viewPrice = blprice;
            }
        }
        $('.gl_large .gl_item').eq(minPrice).insertBefore($('.gl_large .gl_item').eq(i))

        // console.log(minPrice);
    }
}

function numSort() {
    var viewCont = $('.gl_large .gl_item');

    var minPrice;
    var blprice;
    var viewPrice;
    for (i = 0; i < viewCont.length - 1; i++) {
        // 保存当前必须遍历的元素的价格
        minPrice = i;

        viewPrice = Number($('.gl_large .gl_item .p_num em').eq(i).text());
        // console.log(viewPrice);
        for (j = i + 1; j <= viewCont.length; j++) {
            blprice = Number($('.gl_large .gl_item .p_num em').eq(j).text());
            if (viewPrice <= blprice && j < viewCont.length) {
                minPrice = j
                viewPrice = blprice;
            }
        }
        $('.gl_large .gl_item').eq(minPrice).insertBefore($('.gl_large .gl_item').eq(i))
    }
}

// 小图排序
function priceSort1() {
    var viewCont = $('.gl_small .gl_small_item');
    var minPrice;
    var blprice;
    var viewPrice;
    for (i = 0; i < viewCont.length - 1; i++) {
        // 保存当前必须遍历的元素的价格
        minPrice = i;
        viewPrice = Number($('.gl_small .gl_small_item .shop_price em').eq(i).text());
        // console.log(viewPrice);
        for (j = i + 1; j <= viewCont.length; j++) {
            blprice = Number($('.gl_small .gl_small_item .shop_price em').eq(j).text());
            if (viewPrice >= blprice && j < viewCont.length) {
                minPrice = j
                viewPrice = blprice;
            }
        }
        $('.gl_small .gl_small_item').eq(minPrice).insertBefore($('.gl_small .gl_small_item').eq(i))
    }
}

function numSort1() {
    var viewCont = $('.gl_small .gl_small_item');
    var minPrice;
    var blprice;
    var viewPrice;
    for (i = 0; i < viewCont.length - 1; i++) {
        // 保存当前必须遍历的元素的价格
        minPrice = i;
        viewPrice = Number($('.gl_small .gl_small_item .p_num em').eq(i).text());
        // console.log(viewPrice);
        for (j = i + 1; j <= viewCont.length; j++) {
            blprice = Number($('.gl_small .gl_small_item .p_num em').eq(j).text());
            if (viewPrice <= blprice && j < viewCont.length) {
                minPrice = j
                viewPrice = blprice;
            }
        }
        $('.gl_small .gl_small_item').eq(minPrice).insertBefore($('.gl_small .gl_small_item').eq(i))
    }
}
// 默认排序

// 价格查询
function priceInquire() {
    // 创建一个新数组用来保存当前页面的数据
    var arr = [];
    // 获取页面内当前渲染数据
    var arr1 = $('.gl_large .gl_item');

    // 获取输入的最大价格和最小价格
    var minprice = Number($('.fprice .text_min').val());
    var maxprice = Number($('.fprice .text_max').val());

    for (i = 0; i < arr1.length; i++) {
        if ($('.gl_large .gl_item .p_price em').eq(i).text() >= minprice && $('.gl_large .gl_item .p_price em').eq(i).text() <= maxprice) {

            arr.push($('.gl_large .gl_item').eq(i));
        }
    }
    $('.gl_large .gl_item').remove();
    $('.gl_large ul').append(arr);
}

function priceInquire1() {
    // 创建一个新数组用来保存当前页面的数据
    var arr = [];
    // 获取页面内当前渲染数据
    var arr1 = $('.gl_small .gl_small_item');

    // 获取输入的最大价格和最小价格
    var minprice = Number($('.fprice .text_min').val());
    var maxprice = Number($('.fprice .text_max').val());

    for (i = 0; i < arr1.length; i++) {
        if ($('.gl_small .gl_small_item .shop_price em').eq(i).text() >= minprice && $('.gl_small .gl_small_item .shop_price em').eq(i).text() <= maxprice) {

            arr.push($('.gl_small .gl_small_item').eq(i));
        }
    }
    $('.gl_small .gl_small_item').remove();
    $('.gl_small ul').append(arr);
}

// hqData('洗发护发');


// 对比
// 往对比页面动态渲染数据
function xrDuibi(arr) {
    var dbList = "";
    for (i = 0; i < arr.length; i++) {
        dbList += `<li id="${arr[i].goodid}">
                <div class="p-img">
                     <img src="${arr[i].goodurls.showurl}">
                </div>
                <div class="p-right">
                    <div class="p-title">${arr[i].goodtitle}</div>
                        <div class="total">
                            <div class="p-price">￥<span>${arr[i].goodprice}</span></div>
                            <div class="p-del">删除</div>
                        </div>
                    </div>
                </li>`;
    }
    $('.compare-bar .center .shop').append($(dbList))
}
// 获取带点击元素的对象
function duibi() {
    var firstEle;
    $('.gl_large .gl_item .p_operate .db').click(function () {
        // 出现对比样式  勾选对比元素
        var dbindex = $(this).index('.db');
        // 保存input的Id
        var dbId = $(this).prev().attr('id');
        // console.log(dbId);
        // 设置数组用来保存加入对比页面的数据
        var arr = [];
        var getName = [];
        $('.compare-bar').css('display', 'block');


        // 如果当前对比页没有一个数据，则直接添加
        if ($('.compare-bar .center .shop').find('li').length == 0 && !$('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().is(':checked')) {
            $('.gl_large .gl_item .p_operate .db').eq(dbindex).addClass('onChecked');
            // $('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().prop('checked', true)
            // 遍历对象找到对应的数据
            data.beautyData.mianpic.forEach(function (value, index, array) {
                if (dbId == data.beautyData.mianpic[index].goodid) {
                    arr.push(data.beautyData.mianpic[index])
                    firstEle = data.beautyData.mianpic[index].goodstype;
                    xrDuibi(arr);
                }
            })
        }
        // 如果有数据，则判断是不是喝第一个类型一样的数据，若是则添加，并且内容没有超过四个
        else if ($('.compare-bar .center .shop').find('li').length < 4 && $('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().prop('checked') == false) {
            data.beautyData.mianpic.map(function (value, index, array) {
                if (dbId == data.beautyData.mianpic[index].goodid && data.beautyData.mianpic[index].goodstype == firstEle) {
                    arr.push(data.beautyData.mianpic[index]);
                    xrDuibi(arr);
                    $('.gl_large .gl_item .p_operate .db').eq(dbindex).addClass('onChecked');
                    // $('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().prop('checked', true);
                }
            })
            if (arr.length == 0) {
                alert('商品类型不同')
            }

        }
        // 类型不同不允许添加
        else if ($('.compare-bar .center .shop').find('li').length < 4 && $('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().prop('checked') == false) {

        }
        // console.log($('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().is(':checked'));

        // 如果前代你点击的商品已被加入商品对比页内，则在商品对毕业内删除此项，并且当前复选框显示为选中状态 
        else if ($('.compare-bar .center .shop').find('li').length < 4 && $('.gl_large .gl_item .p_operate .db').eq(dbindex).prev().prop('checked') == true) {
            $('.gl_large .gl_item .p_operate .db').eq(dbindex).removeClass('onChecked');
            // 删除改项目
            var VievEleId = $('.gl_large .gl_item .p_operate input').eq(dbindex).attr('id');
            for (i = 0; i < $('.compare-bar .center li').length; i++) {
                if (VievEleId == $('.compare-bar .center li').eq(i).attr('id')) {
                    // console.log("11");
                    $('.compare-bar .center li').eq(i).remove();
                    if ($('.compare-bar .center .shop').find('li').length == 0) {
                        $('.compare-bar').css('display', 'none');
                    }
                }
            }
        } else if ($('.compare-bar .center .shop').find('li').length >= 4) {
            alert('最多只能对比四个')
        }

        $('.compare-bar .center .p-del').click(function () {
            var indexID = $(this).parents('li').attr('id');
            // 清除对应的小框
            var removeXk = [];
            // console.log($('.gl_large .gl_item'));
            for (i = 0; i < $('.gl_large .gl_item').length; i++) {
                var VievEleId = $('.gl_large .gl_item .p_operate input').eq(i).attr('id');
                if (indexID == VievEleId) {
                    $('.gl_large .gl_item .p_operate .db').eq(i).removeClass('onChecked')
                    $('.gl_large .gl_item .p_operate .db').eq(i).prev().prop('checked', false)
                }
            }
            $(this).parents('.shop li').remove();
            if ($('.compare-bar .center .shop').find('li').length == 0) {
                $('.compare-bar').css('display', 'none');
            }
        })

    })


    // 点击隐藏关闭对比窗口
    $('.compare-bar .right .top').click(function () {

        $('.compare-bar').css('display', 'none');
    })
    // 点击清空对比栏
    $('.compare-bar .right .empty').click(function () {
        // console.log('11');
        $('.compare-bar .center .shop li').remove();
        $('.compare-bar').css('display', 'none');
        $('.gl_large .gl_item .p_operate .db').removeClass('onChecked');
        $('.gl_large .gl_item .p_operate .db').prev().prop('checked', false);
    })

}

function duibi1() {
    var firstEle;

    $('.gl_small .gl_small_item .p_operate .db').click(function () {
        // 出现对比样式  勾选对比元素
        var dbindex = $(this).index('.db') - 15;
        // console.log(dbindex)
        // 保存input的Id
        var dbId = $(this).prev().attr('id');
        // console.log(dbId);
        // 设置数组用来保存加入对比页面的数据
        var arr = [];
        var getName = [];
        $('.compare-bar').css('display', 'block');


        // 如果当前对比页没有一个数据，则直接添加
        if ($('.compare-bar .center .shop').find('li').length == 0 && !$('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().is(':checked')) {
            $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).addClass('onChecked');
            // $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().prop('checked', true)
            // 遍历对象找到对应的数据
            data.beautyData.mianpic.forEach(function (value, index, array) {
                if (dbId == data.beautyData.mianpic[index].goodid) {
                    arr.push(data.beautyData.mianpic[index])
                    firstEle = data.beautyData.mianpic[index].goodstype;
                    xrDuibi(arr);
                }
            })
        }
        // 如果有数据，则判断是不是喝第一个类型一样的数据，若是则添加，并且内容没有超过四个
        else if ($('.compare-bar .center .shop').find('li').length < 4 && $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().prop('checked') == false) {
            data.beautyData.mianpic.map(function (value, index, array) {
                if (dbId == data.beautyData.mianpic[index].goodid && data.beautyData.mianpic[index].goodstype == firstEle) {
                    arr.push(data.beautyData.mianpic[index]);
                    xrDuibi(arr);
                    $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).addClass('onChecked');
                    // $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().prop('checked', true);
                }
            })
            if (arr.length == 0) {
                alert('商品类型不同')
            }

        }
        // 类型不同不允许添加
        else if ($('.compare-bar .center .shop').find('li').length < 4 && $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().prop('checked') == false) {

        }
        // console.log($('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().is(':checked'));

        // 如果前代你点击的商品已被加入商品对比页内，则在商品对毕业内删除此项，并且当前复选框显示为选中状态 
        else if ($('.compare-bar .center .shop').find('li').length < 4 && $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).prev().prop('checked') == true) {
            $('.gl_small .gl_small_item .p_operate .db').eq(dbindex).removeClass('onChecked');
            // 删除改项目
            var VievEleId = $('.gl_large .gl_item ..p_operate input').eq(dbindex).attr('id');
            for (i = 0; i < $('.compare-bar .center li').length; i++) {
                if (VievEleId == $('.compare-bar .center li').eq(i).attr('id')) {
                    // console.log("11");
                    $('.compare-bar .center li').eq(i).remove();

                }
            }
        } else if ($('.compare-bar .center .shop').find('li').length >= 4) {
            alert('最多只能对比四个')
        }

        $('.compare-bar .center .p-del').click(function () {

            // 清除对应的小框
            var removeXk = [];
            console.log($('.gl_large .gl_item'));
            for (i = 0; i < $('.gl_large .gl_item').length; i++) {
                var VievEleId = $('.gl_large .gl_item ..p_operate input').eq(i).attr('id');
                if ($('.compare-bar .center .shop li').eq(i).attr('id') == VievEleId) { }
                $('.gl_small .gl_small_item .p_operate .db').eq(i).removeClass('onChecked')
                $('.gl_small .gl_small_item .p_operate .db').eq(i).prev().prop('checked', false)
            }
            $(this).parents('.shop li').remove();

        })
    })


    // 点击隐藏关闭对比窗口
    $('.compare-bar .right .top').click(function () {

        $('.compare-bar').css('display', 'none');
    })

}










// 公共样式公共样式公共样式公共样式
// 公共样式公共样式公共样式公共样式
// 公共样式公共样式公共样式公共样式






// 跳转详情页 加入浏览记录   通过本地存储加载内容
// $('.gl_item').find('.p_img').click(function() {
//     goDetails($(this));
// })
// $('.gl_item').find('.p_name').click(function() {
//     goDetails($(this).siblings('.p_img'));
// })

// $('.gl_small').find('.p_img').click(function() {
//     goDetails($(this));
// })

// $('.gl_small').find('.p_name').click(function() {
//         goDetails($(this).parent().prev());
//     })
// 跳转详情页  并加入到浏览记录
function goDetails(ele) {
    var gid = ele.data('gid')
    data.beautyData.mianpic.forEach(function (value) {
        if (value.goodid == gid) {


            // 将点击的商品添加到浏览记录中
            if (localStorage.getItem('looked')) {
                var look = JSON.parse(localStorage.getItem('looked'));
                var flag = true;
                for (var i in look) {
                    if (look[i].goodid == value.goodid) {
                        flag = false;
                    }
                }
                if (flag) {
                    look.push(value);
                    localStorage.setItem('looked', JSON.stringify(look));
                }

            } else {
                localStorage.setItem('looked', JSON.stringify([value]));
            }
        }
    })
}

// 加入购物车
// $('.addcart').click(function () {
//     var flag = confirm('确定要添加到购物车吗');
//     var gid = $(this).parents('.gl_item_wrap').find('.p_img').data('gid');
//     if (!gid) {
//         gid = $(this).parents('.gl_small_item').find('.p_img').data('gid');
//     }
//     var gooddata;
//     // 获取此商品的详情数据
//     $.each(data.beautyData.mianpic, function (index, value) {
//         if (value.goodid == gid) {
//             gooddata = value;
//         }
//     })
//     console.log(gooddata);

//     // 如果点击确定
//     if (flag) {
//         $('.panel_content').css('display', 'none');
//         // 判断当前本地存储中是否有购物车数据
//         if (localStorage.getItem('cart')) {
//             var cart = JSON.parse(localStorage.getItem('cart'));
//             var test = true;
//             // 遍历当前购物车
//             $.each(cart, function (index, value) {
//                 // 如果存在当前商品
//                 if (value.goodid == gooddata.goodid) {
//                     // 数量加1
//                     value.num++
//                     test = false;
//                 }
//             })
//             // 如果已存在的购物车中没有这个商品
//             if (test) {
//                 gooddata.num = 1;
//                 cart.push(gooddata);
//             }
//             // 将最新的cart数据添加到本地存储
//             localStorage.setItem('cart', JSON.stringify(cart));
//         } else {
//             gooddata.num = 1;
//             localStorage.setItem('cart', JSON.stringify([gooddata]))
//         }

//         update();
//     }
// })





function update() {
    $('.cart_list').children().remove();
    var cart = JSON.parse(localStorage.getItem('cart'));
    $.each(cart, function (index, value) {
        console.log(value);
        $(`
    
    <li class="cart_item">
            <img src="${value.goodurls.nowurl}" width="80px" height="80px" alt="">
            <div class="cart_detail">
                <p>${value.goodtitle}</p>
                <span>￥${value.goodprice}</span>
            </div>
            <div class="cart_num2">
                <div class="bai" data-gid="${value.goodid}">-</div>
                <div class="cart_bailan" ">${value.num}</div>
                <div class="lan" data-gid="${value.goodid}">+</div>
            </div>
    </li>
    `).appendTo('.cart_list')
    })
    $('.last_money').children('span').children('span').text(cart.length);
    $('.cart_num').text(cart.length);
    $('.o').text(cart.length);
    var sumPrice = 0;
    addEvent();
    $.each(cart, function (index, value) {
        sumPrice += Number(value.goodprice) * value.num;
    })
    $('.font_red i').text(sumPrice)
}


function addEvent() {
    $('.bai').click(function () {
        var num = Number($(this).next().text()) - 1;
        var gid = $(this).data('gid');
        if (num <= 0) {
            return;
        } else {
            $(this).next().text(num);
            upCart(gid, num);
            upPrice();
        }
    })


    $('.lan').click(function () {
        var num = Number($(this).prev().text()) + 1;
        var gid = $(this).data('gid');
        $(this).prev().text(num);
        upCart(gid, num);
        upPrice();
    })
}




// 尝试事件代理  加入浏览记录和跳转详情页
$('.items').click(function (event) {
    console.log(event.target);
    var ev = event.target;
    var id = $(ev).parents('.gl_item_wrap').find('.p_img').data('gid') != undefined ? $(ev).parents('.gl_item_wrap').find('.p_img').data('gid') : $(ev).parents('.glSmall_left').find('.p_img').data('gid');
    // console.log($(ev).parents('.gl_item_wrap').find('.p_img'));

    goDetails($(ev).parents('.gl_item_wrap').find('.p_img').length != 0 ? $(ev).parents('.gl_item_wrap').find('.p_img') : $(ev).parents('.glSmall_left').find('.p_img'))
    location.assign('../page/details.html?' + id);
})
// 阻止点击对比 收藏 加入购物车跳转详情页
$('.p_operate').click(function (e) {
    e.stopPropagation();
})